<template>
  <div class='container'>
    <el-row >
  <el-col :span="6"><div class="grid-content bg-purple">
    【题型】：{{question}}
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">
    【编号】：{{topicDetails.id}}
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    【难度】：{{lastDifficulty}}
     </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">
    【标签】：{{topicDetails.tags}}
     </div></el-col>
</el-row>
<el-row >
  <el-col :span="6"><div class="grid-content bg-purple">
    【学科】：{{topicDetails.subjectName}}
     </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">
    【目录】：{{topicDetails.directoryName}}
     </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    【方向】：{{topicDetails.direction}}
     </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">
     </div></el-col>
</el-row>
<hr>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    【题干】：<br>
    <p v-html="topicDetails.question" style="color: blue"></p>

    </div></el-col>
</el-row>
<!-- 单选时显示 -->
<el-row v-if="Number(topicDetails.questionType) === 1">
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    <p>单选题 选项：（以下选中的选项为正确答案）</p>
     <el-radio
     v-for="item in topicDetails.options"
     v-model="item.isRight" :label="Number(1)"
     :key="item.id"
     style="display: block; margin:10px 0"
     >{{item.title}}</el-radio>
    </div></el-col>
</el-row>
<!-- 复选时显示 -->
<el-row v-if="Number(topicDetails.questionType) === 2">
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    <p>多选题 选项：（以下选中的选项为正确答案）</p>
     <el-checkbox
     v-for="item in topicDetails.options"
     :checked="item.isRight === 1 ? true : false"
     :key="item.id"
     style="display: block; margin:10px 0"
     >{{item.title}}</el-checkbox>
    </div></el-col>
</el-row>

<hr>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    【参考答案】：<el-button @click="videoShow" type="danger" size="small">视频答案预览</el-button>
    <vueMiniPlayer v-if="videoShows" style="width:400px; hight: 300px"
    ref="vueMiniPlayer"
    :video="video"
    :mutex="true"
    />
      <meta name="referrer" content="no-referrer"/>
    <div class='demo'>

 </div>

    </div></el-col>
</el-row>
<hr>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    【答案解析】：<p v-html="topicDetails.answer"></p>
    </div></el-col>
</el-row>
<hr>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    【题目备注】：{{topicDetails.remarks}}
    </div></el-col>
</el-row>
  </div>
</template>

<script>
// 引入枚举数据
import { questionType, difficulty } from '@/api/hmmm/constants'
// 引入视频组件

export default {
  props: {
    topicDetails: {
      type: Object,
      required: true
    }
  },

  data () {
    return {
      question: '', // 题型数据
      lastDifficulty: '', // 难度
      videoShows: false, // 视频组件是否显示
      video: {
        url: '',
        cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: false,
        crossOrigin: 'anonymous'
      }

    }
  },
  // 注册视频组件
  computed: {
    $video () {
      return this.$refs.vueMiniPlayer.$video
    }
  },
  created () {
    // 枚举题型数据
    this.question = this.choose(questionType, Number(this.topicDetails.questionType))
    // 枚举难度数据
    this.lastDifficulty = this.choose(difficulty, Number(this.topicDetails.difficulty))
    // 视频地址赋值
    this.vUrl()
  },

  methods: {
    // 视频点击展示按钮
    videoShow () {
      if (this.topicDetails.videoURL !== '') {
        this.videoShows = true
      } else {
        this.$message.success('没有视频哦!!!')
      }
    },
    // 视频地址赋值
    vUrl () {
      this.video.url = this.topicDetails.videoURL
    },
    // 枚举数据
    choose (src, value) {
      const res = src.find(item => value === item.value)
      return res.label
    }
  }
}
</script>

<style scoped lang='less'>

</style>
